<template>
  <div>
    <div class="FRMPage">
      <!-- 轮播 -->
      <div class="carousel">
        <div class="swiper_con">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                :title="image.title"
                v-for="(image, index) in imageData"
                :key="index"
              >
                <div class="swiper-image">
                  <img :src="image.imgUrl" alt="" />
                </div>
              </div>
            </div>

            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
      <div class="intd heart_w">
        <div class="top">
          <div class="left">
            <div class="video_box wow animate__animated animate__fadeInUp">
              <video id="video" controls :src="video_url"></video>
              <img id="play_img" src="@/assets/images/play.png" alt="" />
            </div>
            <div class="swiper_video">
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide wow animate__animated animate__fadeInUp"
                    v-for="(item, index) in suggest_courses"
                    :key="index"
                  >
                    <a style="display: block" @click="changgecideo(item.video)">
                      <img :src="item.image" alt="" />
                    </a>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="text">
              <h1 class="wow animate__animated animate__fadeInUp">
                FRM—金融风险管理师
              </h1>
              <p
                class="wow animate__animated animate__fadeInUp"
                data-wow-delay="0.2s"
              >
                FRM(Financial Risk
                Manager)——金融风险管理师，是全球金融风险管理领域权威的资格认证，由美国“全球风险管理专业人士协会”（GARP）设立。FRM证书是国际公认的，证明持有者拥有做出客观的风险分析以及相关决策等风险管理必备的、完整的知识结构和能力。并已经得到欧美跨国金融公司、监管机构，特别是华尔街的认可和支持。
              </p>
            </div>

            <div class="tips">
              <div
                class="item wow animate__animated animate__fadeInUp"
                data-wow-delay="0.3s"
              >
                <div class="inner">
                  <img src="@/assets/images/frm_img/rz_big.png" alt="" />
                  <p>金融风险国际资格认证</p>
                </div>
                <div class="out animate__animated">
                  <img src="@/assets/images/frm_img/rz.png" alt="" />
                  <p>
                    FRM已经得到华尔街和众多欧美著名金融机构、大型公司风险管理部门以及各国政府监管层和金融监管部门的认同，并已佳都科技阿拉丁克拉斯
                  </p>
                </div>
              </div>
              <div
                class="item wow animate__animated animate__fadeInUp"
                data-wow-delay="0.4s"
              >
                <div class="inner">
                  <img src="@/assets/images/frm_img/jr_big.png" alt="" />
                  <p>金融风险国际资格认证</p>
                </div>
                <div class="out animate__animated">
                  <img src="@/assets/images/frm_img/gd.png" alt="" />
                  <p>
                    FRM已经得到华尔街和众多欧美著名金融机构、大型公司风险管理部门以及各国政府监管层和金融监管部门的认同，并已佳都科技阿拉丁克拉斯
                  </p>
                </div>
              </div>
              <div
                class="item wow animate__animated animate__fadeInUp"
                data-wow-delay="0.5s"
              >
                <div class="inner">
                  <img src="@/assets/images/frm_img/rc_big.png" alt="" />
                  <p>金融风险国际资格认证</p>
                </div>
                <div class="out animate__animated">
                  <img src="@/assets/images/frm_img/rc.png" alt="" />
                  <p>
                    FRM已经得到华尔街和众多欧美著名金融机构、大型公司风险管理部门以及各国政府监管层和金融监管部门的认同，并已佳都科技阿拉丁克拉斯
                  </p>
                </div>
              </div>
              <div
                class="item wow animate__animated animate__fadeInUp"
                data-wow-delay="0.6s"
              >
                <div class="inner">
                  <img src="@/assets/images/frm_img/xz_big.png" alt="" />
                  <p>金融风险国际资格认证</p>
                </div>
                <div class="out animate__animated">
                  <img src="@/assets/images/frm_img/xz.png" alt="" />
                  <p>
                    FRM已经得到华尔街和众多欧美著名金融机构、大型公司风险管理部门以及各国政府监管层和金融监管部门的认同，并已佳都科技阿拉丁克拉斯
                  </p>
                </div>
              </div>
              <div
                class="item wow animate__animated animate__fadeInUp"
                data-wow-delay="0.7s"
              >
                <div class="inner">
                  <img src="@/assets/images/frm_img/cm_big.png" alt="" />
                  <p>金融风险国际资格认证</p>
                </div>
                <div class="out animate__animated">
                  <img src="@/assets/images/frm_img/cm.png" alt="" />
                  <p>
                    FRM已经得到华尔街和众多欧美著名金融机构、大型公司风险管理部门以及各国政府监管层和金融监管部门的认同，并已佳都科技阿拉丁克拉斯
                  </p>
                </div>
              </div>
              <div
                class="item wow animate__animated animate__fadeInUp"
                data-wow-delay="0.8s"
              >
                <div class="inner">
                  <img src="@/assets/images/frm_img/gz_big.png" alt="" />
                  <p>金融风险国际资格认证</p>
                </div>
                <div class="out animate__animated">
                  <img src="@/assets/images/frm_img/gz.png" alt="" />
                  <p>
                    FRM已经得到华尔街和众多欧美著名金融机构、大型公司风险管理部门以及各国政府监管层和金融监管部门的认同，并已佳都科技阿拉丁克拉斯
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="btm">
          <div
            class="item wow animate__animated animate__fadeInRight"
            data-wow-delay="0.2s"
          >
            <div class="inner">
              <img src="@/assets/images/frm_img/gfl.png" alt="" />
              <h5>高福利</h5>
              <h3>1+N</h3>
              <p class="title">1+N政策优惠:</p>
              <p class="info">
                国内金融行业发布三年规划，北、上、广、深等各大城市享受落户，就业，工作，等多项政策福利。
              </p>
            </div>
          </div>
          <div
            class="item wow animate__animated animate__fadeInRight"
            data-wow-delay="0.3s"
          >
            <div class="inner">
              <img src="@/assets/images/frm_img/gxz.png" alt="" />
              <h5>高薪资</h5>
              <h3>50000+</h3>
              <p class="title">50000+ 月薪水平:</p>
              <p class="info">
                金融机构千万高薪挖金融科技领军人才，起薪普遍高于行业平均水平，考取FRM意味着高薪资的跨越。
              </p>
            </div>
          </div>
          <div
            class="item wow animate__animated animate__fadeInRight"
            data-wow-delay="0.4s"
          >
            <div class="inner">
              <img src="@/assets/images/frm_img/dqk.png" alt="" />
              <h5>大缺口</h5>
              <h3>30万+</h3>
              <p class="title">30万+ 人才缺口:</p>
              <p class="info">
                随着金融的发展，金融风险人才受到前所未有的重视，巨大的人才缺口使得金融风险管理师成为重要紧缺人才。
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 倒计时 -->
      <div class="free_get">
        <div class="inner_box">
          <div
            class="item wow animate__animated animate__fadeInUp"
            data-wow-delay="0.1s"
          >
            <h5>FRM考试倒计时</h5>
            <div class="ditance">
              <p>距FRM一级5月11日考试</p>
              <div class="reciprocal" data-times="2024/05/11">
                <div class="day">5</div>
                <div class="day">8</div>
                <span>天</span>
              </div>
            </div>
            <div class="ditance">
              <p>距FRM二级5月18日考试</p>
              <div class="reciprocal" data-times="2024/05/18">
                <div class="day">5</div>
                <div class="day">8</div>
                <span>天</span>
              </div>
            </div>
          </div>
          <div
            class="item_2n item free wow animate__animated animate__fadeInUp"
            data-wow-delay="0.2s"
          >
            <img src="@/assets/images/frm_img/mflq.png" alt="" />
            <div class="free_box">
              <h5>免费领取</h5>
              <p>FRM名师试听课</p>
            </div>
            <a
              href="https://www.rongyuejiaoyu.com/combo/index/free"
              target="_blank"
            >
              <p>立即领取 》</p>
            </a>
          </div>
          <div
            class="item_2n item free wow animate__animated animate__fadeInUp"
            data-wow-delay="0.3s"
          >
            <img src="@/assets/images/frm_img/mfgl.png" alt="" />
            <div class="free_box">
              <h5>免费领取</h5>
              <p>FRM名师试听课</p>
            </div>
            <a
              href="https://www.rongyuejiaoyu.com/combo/index/free"
              target="_blank"
            >
              <p>立即领取 》</p>
            </a>
          </div>
          <div
            class="item_2n item free wow animate__animated animate__fadeInUp"
            data-wow-delay="0.4s"
          >
            <img src="@/assets/images/frm_img/dbm.png" alt="" />
            <div class="free_box">
              <h5>免费领取</h5>
              <p>FRM名师试听课</p>
            </div>
            <a
              href="https://www.rongyuejiaoyu.com/combo/index/free"
              target="_blank"
            >
              <p>立即领取 》</p>
            </a>
          </div>
          <div
            class="item_2n item free wow animate__animated animate__fadeInUp"
            data-wow-delay="0.5s"
          >
            <img src="@/assets/images/frm_img/kszl.png" alt="" />
            <div class="free_box">
              <h5>免费领取</h5>
              <p>FRM名师试听课</p>
            </div>
            <a
              href="https://www.rongyuejiaoyu.com/combo/index/free"
              target="_blank"
            >
              <p>立即领取 》</p>
            </a>
          </div>
        </div>
      </div>
      <!-- 快速斩获 -->
      <div class="course_box heart_w">
        <div class="title_box">
          <h1 class="wow animate__animated animate__fadeInRight animated">
            想要快速斩获FRM
          </h1>
          <span class="wow animate__animated animate__fadeInRight animated">
          </span>
          <p
            data-wow-delay="0.2s"
            class="wow animate__animated animate__fadeInRight animated"
          >
            FRM培训课程助力培养创新型、实用型的金融人才
          </p>
        </div>

        <div class="courses">
          <h5
            class="wow animate__animated animate__fadeInRight"
            data-wow-delay="0.4s"
          >
            专属定制课程 助力0基础飞越
          </h5>
          <div class="main">
            <a
              href="https://www.rongyuejiaoyu.com/combo/order/combo_detail/coid/703"
              class="wow animate__animated animate__fadeInRight"
              data-wow-delay="0.0s"
              target="_blank"
            >
              <div class="img_t">
                <img
                  src="https://video.rycfa.com/image/default/4B6D6DE40EF6451D8D3F21B24242E41D-6-2.jpg"
                  alt=""
                />
              </div>
              <h6>FRM金融计算器使用教程</h6>
              <div class="course_adt">
                金融计算器课程属于FRM备考的入门课程之一，实用性强，是通过FRM考试的必要技能。本课程逻辑清晰，重点突出，方便随学随练，为后面的学习做题扫除障碍，打下夯实的基础。
              </div>
              <p class="study_count">
                <span>查看详情</span>
              </p>
            </a>

            <a
              class="more_t wow animate__animated animate__fadeInRight"
              data-wow-delay="0.5s"
              href="https://www.rongyuejiaoyu.com/combo/order/combo/cid/2"
              target="_blank"
            >
              更多FRM课程
            </a>
          </div>
        </div>
      </div>

      <!-- 免费资料 -->
      <div class="free_data">
        <h5 class="wow animate__animated animate__fadeInUp">免费申领FRM试学</h5>
        <div class="datum heart_w">
          <div class="ipts">
            <input
              class="wow animate__animated animate__fadeInRight"
              data-wow-delay="0.2s"
              type="text"
              v-model="datumForm.name"
              placeholder="请输入您的姓名"
            />
            <input
              class="wow animate__animated animate__fadeInRight"
              data-wow-delay="0.3s"
              type="text"
              v-model="datumForm.phone"
              placeholder="请输入您的手机号"
            />
            <input
              class="wow animate__animated animate__fadeInRight"
              data-wow-delay="0.4s"
              type="text"
              v-model="datumForm.code"
              placeholder="请输入验证码"
            />
            <a
              class="wow animate__animated animate__fadeInRight"
              data-wow-delay="0.5s"
              rel="nofollow"
              href="javascript:void(0);"
              @click="getcode"
            >
              {{ timeText }}
            </a>
            <a
              class="wow animate__animated animate__fadeInRight"
              data-wow-delay="0.6s"
              rel="nofollow"
              href="javascript:void(0);"
              @click="getData"
            >
              立即领取
            </a>
          </div>
        </div>
      </div>

      <!-- 直播 -->
      <div class="live_box heart_w">
        <h1 class="wow animate__animated animate__fadeInUp">
          精彩直播学堂 助攻快速加分
        </h1>
        <!-- 轮播展示 -->
        <div class="live_swiper">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide wow animate__animated animate__fadeInRight"
                data-wow-delay="0.0s"
              >
                <div class="time">
                  <h5>2023-12-02</h5>
                  <p>19:00 - 20:00</p>
                </div>
                <div class="live_info">
                  <img
                    src="http://img.rongyuejiaoyu.com//uploads/20231206/a0c5f1ca34aa255283aa592ae012a2ac.jpg"
                    alt=""
                  />
                  <p class="live_name">2024年FRM最新考纲解读&备考攻略</p>
                  <div class="yy_num">
                    <p class="isopen"><i></i><span>免费</span></p>
                  </div>
                  <a
                    href="https://www.rongyuejiaoyu.com/combo/live/live_lesson/id/960"
                    class="yy_now wow animate__animated animate__fadeInRight"
                    data-wow-delay="0.6s"
                    target="_blank"
                  >
                    观看回放
                  </a>
                </div>
              </div>
              <div
                class="swiper-slide wow animate__animated animate__fadeInRight"
                data-wow-delay="0.1s"
              >
                <div class="time">
                  <h5>2022-12-29</h5>
                  <p>19:00 - 21:00</p>
                </div>
                <div class="live_info">
                  <img
                    src="https://img.rongyuejiaoyu.com//uploads/20221227/fa00dd18d6a3e0c06f66c7c6914aad91.jpg"
                    alt=""
                  />
                  <p class="live_name">一堂玩转股、债、基的课</p>
                  <div class="yy_num">
                    <p class="isopen"><i></i><span>免费</span></p>
                  </div>
                  <a
                    href="https://www.rongyuejiaoyu.com/combo/live/live_lesson/id/810"
                    class="yy_now wow animate__animated animate__fadeInRight"
                    data-wow-delay="0.6s"
                    target="_blank"
                  >
                    观看回放
                  </a>
                </div>
              </div>
            </div>

            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
          <a
            class="all_live wow animate__animated animate__fadeInRight"
            data-wow-delay="1s"
            href="https://www.rongyuejiaoyu.com/combo/index/zhibo"
            target="_blank"
          >
            查看全部直播
          </a>
        </div>
      </div>

      <!-- 大咖讲师 -->
      <div class="lecturer">
        <h1 class="wow animate__animated animate__fadeInRight">
          业内大咖讲师，助学“C位”出道
        </h1>
        <div class="teachers heart_w">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide wow animate__animated animate__fadeInRight"
                data-wow-delay="0.0s"
              >
                <div class="tea_img">
                  <div class="inner">
                    <img
                      class="wow animate__animated animate__fadeInDown"
                      src="https://img.rongyuejiaoyu.com/uploads/20221217/e8acacea242d29017d0ff6594436894b.png"
                      alt=""
                    />
                  </div>
                </div>
                <div class="tea_info">
                  <h5>Lynn</h5>
                  <p>融跃FRM讲师</p>
                  <p class="info">
                    <span>老师简介:</span>
                    从事FRM的教学与研究工作5年+，教学经验丰富，以生动、直观的授课方式加深学员的理解，便于学员在考试中举一反三，适应FRM考试灵活多变的特点，从而使学生更加轻松地通过考试。
                    拥有丰富的风险管理工作经验。
                    主讲科目：FRM：数量分析、金融市场和产品、流动性和资金风险计量和管理等。
                  </p>
                  <div class="btns">
                    <a
                      href="javascript:void(0)"
                      class="contact_kefu"
                      rel="nofollow"
                    >
                      → 向老师提问
                    </a>
                    <a
                      href="https://www.rongyuejiaoyu.com/index/index/teacher_team"
                      target="_blank"
                    >
                      查看老师详情
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide wow animate__animated animate__fadeInRight"
                data-wow-delay="0.0s"
              >
                <div class="tea_img">
                  <div class="inner">
                    <img
                      class="wow animate__animated animate__fadeInDown"
                      src="https://img.rongyuejiaoyu.com/uploads/20221217/e8acacea242d29017d0ff6594436894b.png"
                      alt=""
                    />
                  </div>
                </div>
                <div class="tea_info">
                  <h5>Lynn</h5>
                  <p>融跃FRM讲师</p>
                  <p class="info">
                    <span>老师简介:</span>
                    从事FRM的教学与研究工作5年+，教学经验丰富，以生动、直观的授课方式加深学员的理解，便于学员在考试中举一反三，适应FRM考试灵活多变的特点，从而使学生更加轻松地通过考试。
                    拥有丰富的风险管理工作经验。
                    主讲科目：FRM：数量分析、金融市场和产品、流动性和资金风险计量和管理等。
                  </p>
                  <div class="btns">
                    <a
                      href="javascript:void(0)"
                      class="contact_kefu"
                      rel="nofollow"
                    >
                      → 向老师提问
                    </a>
                    <a
                      href="https://www.rongyuejiaoyu.com/index/index/teacher_team"
                      target="_blank"
                    >
                      查看老师详情
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide wow animate__animated animate__fadeInRight"
                data-wow-delay="0.0s"
              >
                <div class="tea_img">
                  <div class="inner">
                    <img
                      class="wow animate__animated animate__fadeInDown"
                      src="https://img.rongyuejiaoyu.com/uploads/20221217/e8acacea242d29017d0ff6594436894b.png"
                      alt=""
                    />
                  </div>
                </div>
                <div class="tea_info">
                  <h5>Lynn</h5>
                  <p>融跃FRM讲师</p>
                  <p class="info">
                    <span>老师简介:</span>
                    从事FRM的教学与研究工作5年+，教学经验丰富，以生动、直观的授课方式加深学员的理解，便于学员在考试中举一反三，适应FRM考试灵活多变的特点，从而使学生更加轻松地通过考试。
                    拥有丰富的风险管理工作经验。
                    主讲科目：FRM：数量分析、金融市场和产品、流动性和资金风险计量和管理等。
                  </p>
                  <div class="btns">
                    <a
                      href="javascript:void(0)"
                      class="contact_kefu"
                      rel="nofollow"
                    >
                      → 向老师提问
                    </a>
                    <a
                      href="https://www.rongyuejiaoyu.com/index/index/teacher_team"
                      target="_blank"
                    >
                      查看老师详情
                    </a>
                  </div>
                </div>
              </div>
              <div
                class="swiper-slide wow animate__animated animate__fadeInRight"
                data-wow-delay="0.0s"
              >
                <div class="tea_img">
                  <div class="inner">
                    <img
                      class="wow animate__animated animate__fadeInDown"
                      src="https://img.rongyuejiaoyu.com/uploads/20221217/e8acacea242d29017d0ff6594436894b.png"
                      alt=""
                    />
                  </div>
                </div>
                <div class="tea_info">
                  <h5>Lynn</h5>
                  <p>融跃FRM讲师</p>
                  <p class="info">
                    <span>老师简介:</span>
                    从事FRM的教学与研究工作5年+，教学经验丰富，以生动、直观的授课方式加深学员的理解，便于学员在考试中举一反三，适应FRM考试灵活多变的特点，从而使学生更加轻松地通过考试。
                    拥有丰富的风险管理工作经验。
                    主讲科目：FRM：数量分析、金融市场和产品、流动性和资金风险计量和管理等。
                  </p>
                  <div class="btns">
                    <a
                      href="javascript:void(0)"
                      class="contact_kefu"
                      rel="nofollow"
                    >
                      → 向老师提问
                    </a>
                    <a
                      href="https://www.rongyuejiaoyu.com/index/index/teacher_team"
                      target="_blank"
                    >
                      查看老师详情
                    </a>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
          </div>
          <a
            class="more_t wow animate__animated animate__bounceInRight"
            data-wow-delay="0.8s"
            href="https://www.rongyuejiaoyu.com/index/index/teacher_team"
            target="_blank"
          >
            更多老师 》
          </a>
        </div>
      </div>

      <div class="heart_w">
        <!-- 服务保障 -->
        <div class="service">
          <h1
            class="wow animate__animated animate__fadeInUp"
            data-wow-duration="0.5s"
          >
            6大服务保障 助力通关无忧
          </h1>
          <div class="service_box">
            <div
              class="item wow animate__animated animate__fadeInRight"
              data-wow-delay="0.3s"
            >
              <img src="@/assets/images/frm_img/zerojc.png" alt="" />
              <h5>0基础教育</h5>
              <p>
                真正的零基础入门，渐进式学习避免小白学员“从入门到放弃的尴尬”
              </p>
            </div>
            <div
              class="item border wow animate__animated animate__fadeInRight"
              data-wow-delay="0.4s"
            >
              <img src="@/assets/images/frm_img/dk.png" alt="" />
              <h5>大咖亲授</h5>
              <p>
                具有多年丰富实战经验的FRM培训讲师亲身传授，言传身教，快速吸收课程内容
              </p>
            </div>
            <div
              class="item wow animate__animated animate__fadeInRight"
              data-wow-delay="0.5s"
            >
              <img src="@/assets/images/frm_img/px.png" alt="" />
              <h5>陪学监督</h5>
              <p>
                专业的FRM学管老师，全程陪伴学习，监督你的学习进度，保证你的学习质量
              </p>
            </div>
            <div
              class="item wow animate__animated animate__fadeInRight"
              data-wow-delay="0.6s"
            >
              <img src="@/assets/images/frm_img/srdz.png" alt="" />
              <h5>私人订制</h5>
              <p>
                融跃为每位FRM学员提供“私人订制”服务，针对每个人的不同，制定针对性的学习计划
              </p>
            </div>
            <div
              class="item border wow animate__animated animate__fadeInRight"
              data-wow-delay="0.7s"
            >
              <img src="@/assets/images/frm_img/kqyt.png" alt="" />
              <h5>模拟评测</h5>
              <p>根据考纲，针对FRM一二级考试中的重点、易考常考点做综合性考察</p>
            </div>
            <div
              class="item wow animate__animated animate__fadeInRight"
              data-wow-delay="0.8s"
            >
              <img src="@/assets/images/frm_img/dy.png" alt="" />
              <h5>答疑服务</h5>
              <p>
                融跃FRM开设答疑服务，无论你是在线学员还是面授学员，都能帮你答疑解惑
              </p>
            </div>
          </div>
        </div>

        <!-- 金融资讯 -->
        <div class="finance_msg">
          <h5
            class="tit wow animate__animated animate__bounceInUp"
            data-wow-delay="0.1s"
          >
            前沿金融资讯 备考动态早知道
          </h5>
          <div class="msg_box">
            <div class="msg_nav">
              <p
                class="wow active animate__animated animate__bounceInUp"
                data-wow-delay="0.0s"
              >
                热点问答
              </p>
              <p
                class="wow animate__animated animate__bounceInUp"
                data-wow-delay="0.1s"
              >
                经验分享
              </p>
              <p
                class="wow animate__animated animate__bounceInUp"
                data-wow-delay="0.2s"
              >
                热点资讯
              </p>
              <p
                class="wow animate__animated animate__bounceInUp"
                data-wow-delay="0.3s"
              >
                职业发展
              </p>
              <p
                class="wow animate__animated animate__bounceInUp"
                data-wow-delay="0.4s"
              >
                考试动态
              </p>
            </div>
            <div class="main">
              <div class="main_box">
                <div class="msg_main">
                  <div
                    class="left wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.7s"
                  >
                    <a
                      href="http://www.rongyuejiaoyu.com/cfa/list/68"
                      target="_blank"
                    >
                      <img src="@/assets/images/frm_img/rdwt.png" alt="" />
                    </a>
                  </div>
                  <div class="right">
                    <a
                      href="http://www.rongyuejiaoyu.com/frm/article/35054.html"
                      target="_blank"
                    >
                      <h5
                        class="wow animate__animated animate__bounceInUp"
                        data-wow-delay="0.8s"
                        title="frm考试需要英语很好吗？"
                      >
                        frm考试需要英语很好吗？
                      </h5>
                      <p
                        class="wow animate__animated animate__bounceInUp"
                        data-wow-delay="0.9s"
                      >
                        FRM考试作为国际知名的金融风险管理认证，采用的是英文考试，许多考生会担心自己的英语水平是否足够应对考试。那么FRM考试真的需要英语很好吗？跟着融跃老师来了解一下。
                      </p>
                    </a>
                    <div class="list">
                      <a
                        class="wow animate__animated animate__bounceInUp"
                        data-wow-delay="0.1s"
                        title="frm考试必须在几年内考完？"
                        href="http://www.rongyuejiaoyu.com/frm/article/35040.html"
                        target="_blank"
                      >
                        <p>
                          <span class="titbox">frm考试必须在几年内考完？</span>
                          <span>2024-03-08</span>
                        </p>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="getdata">
                <h5
                  class="wow animate__animated animate__bounceInUp"
                  data-wow-delay="0.8s"
                >
                  免费领取FRM资料包
                </h5>
                <img
                  class="wow animate__animated animate__bounceInUp"
                  data-wow-delay="0.9s"
                  src="@/assets/images/frm_img/zl.png"
                  alt=""
                />
                <input
                  data-wow-delay="1s"
                  class="wow animate__animated animate__bounceInUp"
                  v-model="your_name"
                  type="text"
                  placeholder="姓名"
                />
                <input
                  data-wow-delay="1.1s"
                  class="wow animate__animated animate__bounceInUp"
                  v-model="your_phone"
                  type="text"
                  placeholder="电话"
                />
                <input
                  data-wow-delay="1.2s"
                  class="wow animate__animated animate__bounceInUp"
                  v-model="your_email"
                  type="text"
                  placeholder="邮箱"
                />
                <div class="btns">
                  <button
                    class="wow animate__animated animate__bounceInUp"
                    data-wow-delay="1.4s"
                    @click="getdata_t"
                  >
                    提交
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="test_date">
          <h3>考试日历</h3>
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide wow animate__animated animate__bounceInRight"
                data-wow-delay="0.3s"
              >
                <p class="line">
                  <span></span>
                </p>
                <div class="time">
                  <p>2023/12/1-2024/1/31</p>
                  <p>5月考试早鸟阶段报名</p>
                </div>
              </div>
            </div>

            <!-- 前景后退按钮 -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>

        <div class="correlation">
          <ul class="card_box">
            <li
              @mouseenter="frmid = 0"
              :class="{ active: frmid == 0 }"
              class="card_item"
            >
              <div class="card">
                <div class="titles">
                  <h3
                    class="wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.2s"
                  >
                    FRM考试报名
                  </h3>
                  <p
                    class="wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.3s"
                  >
                    考试限制少 证书含金量高
                  </p>
                </div>
                <div class="first_content">
                  <ul class="first_list">
                    <li>
                      <img src="@/assets/images/frm_img/bmtj.png" alt="" />
                      <p>报名条件</p>
                    </li>
                    <li>
                      <img src="@/assets/images/frm_img/kssj.png" alt="" />
                      <p>报名时间</p>
                    </li>
                    <li>
                      <img src="@/assets/images/frm_img/bmsj.png" alt="" />
                      <p>报名流程</p>
                    </li>
                    <li>
                      <img src="@/assets/images/frm_img/bmtj.png" alt="" />
                      <p>报名费用</p>
                    </li>
                    <li>
                      <img src="@/assets/images/frm_img/bmtj.png" alt="" />
                      <p>免费代报名</p>
                    </li>
                  </ul>
                </div>
                <div class="second_content">
                  <div
                    class="center wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.5s"
                  >
                    <div class="item">
                      <div class="title">
                        <img src="@/assets/images/frm_img/bmtj.png" alt="" />
                        <p>报名条件</p>
                      </div>
                      <p>没有学历限制及行业限制在校大 学生也可以报名参加</p>
                      <a
                        href="https://www.rongyuejiaoyu.com/frm/article/34584.html"
                        target="_blank"
                      >
                        了解详情
                      </a>
                    </div>
                    <div class="item">
                      <div class="title">
                        <img src="@/assets/images/frm_img/bmsj.png" alt="" />
                        <p>报名时间</p>
                      </div>
                      <p class="text">每年的年末公布次年的报名时间</p>
                      <a
                        href="https://www.rongyuejiaoyu.com/frm/article/34244.html"
                        target="_blank"
                        >了解详情</a
                      >
                    </div>
                  </div>
                  <div
                    class="btm wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.7s"
                  >
                    <a
                      href="https://www.rongyuejiaoyu.com/frm/article/34568.html"
                      class="item"
                      target="_blank"
                    >
                      <h5>报名费用</h5>
                      <p>早鸟阶段600美元，标准阶段800美元</p>
                    </a>
                    <a
                      href="https://www.rongyuejiaoyu.com/frm/article/34244.html"
                      class="item"
                      target="_blank"
                    >
                      <h5>报名时间</h5>
                      <p>2024年考试报名开始啦</p>
                    </a>
                    <a
                      href="https://jinshuju.net/f/jqnGhS"
                      rel="nofollow"
                      class="item"
                      target="_blank"
                    >
                      <h5>免费代报名</h5>
                      <p>不限是否为融跃学员</p>
                    </a>
                  </div>
                </div>
              </div>
            </li>
            <li
              @mouseenter="frmid = 1"
              :class="{ active: frmid == 1 }"
              class="card_item"
            >
              <div class="card">
                <div class="titles">
                  <h3
                    class="wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.4s"
                  >
                    FRM考试攻略
                  </h3>
                  <p
                    class="wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.5s"
                  >
                    FRM备考 全攻略
                  </p>
                </div>
                <div class="card_content first_content">
                  <ul class="first_list">
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="0.6s"
                    >
                      <img src="@/assets/images/frm_img/ksdg.png" alt="" />
                      <p>FRM考试大纲</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="0.7s"
                    >
                      <img src="@/assets/images/frm_img/kskm.png" alt="" />
                      <p>FRM考试科目</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="0.8s"
                    >
                      <img src="@/assets/images/frm_img/kssj.png" alt="" />
                      <p>FRM考试时间</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="0.9s"
                    >
                      <img src="@/assets/images/frm_img/ksdd.png" alt="" />
                      <p>FRM考试地点</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="1s"
                    >
                      <img src="@/assets/images/frm_img/kslc.png" alt="" />
                      <p>FRM考试流程</p>
                    </li>
                  </ul>
                </div>
                <div class="card_content second_content">
                  <div class="center">
                    <div class="item">
                      <div class="title">
                        <img src="@/assets/images/frm_img/ksdg.png" alt="" />
                        <p>FRM考试大纲</p>
                      </div>
                      <p class="text">考试大纲在前一年的12月初更新一次</p>
                      <a
                        href="https://www.rongyuejiaoyu.com/frm/article/33943.html"
                        target="_blank"
                      >
                        了解详情
                      </a>
                    </div>
                    <div class="item">
                      <div class="title">
                        <img src="@/assets/images/frm_img/kskm.png" alt="" />
                        <p>FRM考试科目</p>
                      </div>
                      <p class="text">FRM考试一共两级，总共十个科目</p>
                      <a
                        href="https://www.rongyuejiaoyu.com/frm/article/33914.html"
                        target="_blank"
                      >
                        了解详情
                      </a>
                    </div>
                  </div>
                  <div class="btm">
                    <a
                      href="https://www.rongyuejiaoyu.com/frm/article/34244.html"
                      class="item"
                      target="_blank"
                    >
                      <h5>FRM考试时间</h5>
                      <p>2024年5月、8月和11月</p>
                    </a>
                    <a
                      href="https://www.rongyuejiaoyu.com/frm/article/34569.html"
                      class="item"
                      target="_blank"
                    >
                      <h5>FRM考试地点</h5>
                      <p>全国各大一线城市均有考场</p>
                    </a>
                    <a
                      href="https://www.rongyuejiaoyu.com/frm/article/33941.html"
                      class="item"
                      target="_blank"
                    >
                      <h5>FRM考试流程</h5>
                      <p>考场注意事项</p>
                    </a>
                  </div>
                </div>
              </div>
            </li>
            <li
              @mouseenter="frmid = 2"
              :class="{ active: frmid == 2 }"
              class="card_item"
            >
              <div class="card">
                <div class="titles">
                  <h3
                    class="wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.5s"
                  >
                    FRM成绩查询
                  </h3>
                  <p
                    class="wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.6s"
                  >
                    获取证书 迈入巅峰
                  </p>
                </div>
                <div class="card_content first_content">
                  <ul class="first_list">
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="0.7s"
                    >
                      <img src="@/assets/images/frm_img/zkz.png" alt="" />
                      <p>准考证</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="0.8s"
                    >
                      <img src="@/assets/images/frm_img/cjcx.png" alt="" />
                      <p>成绩查询</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="0.9s"
                    >
                      <img src="@/assets/images/frm_img/hzlc.png" alt="" />
                      <p>获证流程</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="1s"
                    >
                      <img src="@/assets/images/frm_img/zygh.png" alt="" />
                      <p>职业规划</p>
                    </li>
                  </ul>
                </div>
                <div class="second_content">
                  <div class="center">
                    <div class="item">
                      <div class="title">
                        <img src="@/assets/images/frm_img/zkz.png" alt="" />
                        <p>准考证</p>
                      </div>
                      <p class="text">
                        考试当月的月初GARP会发送邮件通知所有的考生打印FRM准考证
                      </p>
                      <a
                        href="https://www.rongyuejiaoyu.com/frm/article/34523.html"
                        target="_blank"
                        >了解详情</a
                      >
                    </div>
                    <div class="item">
                      <div class="title">
                        <img src="@/assets/images/frm_img/cjcx.png" alt="" />
                        <p>成绩查询</p>
                      </div>
                      <p class="text">
                        通常协会将在FRM考试结束后45天左右发布成绩
                      </p>
                      <a
                        href="https://www.rongyuejiaoyu.com/frm/article/34585.html"
                        target="_blank"
                        >了解详情</a
                      >
                    </div>
                  </div>
                  <div class="btm">
                    <a
                      href="https://www.rongyuejiaoyu.com/frm/article/33992.html"
                      class="item"
                      target="_blank"
                    >
                      <h5>获证流程</h5>
                      <p>证书获取步骤</p>
                    </a>
                    <a
                      href="https://www.rongyuejiaoyu.com/frm/list/4.html"
                      class="item"
                      target="_blank"
                    >
                      <h5>职业规划</h5>
                      <p>迈向人生巅峰</p>
                    </a>
                  </div>
                </div>
              </div>
            </li>
            <li
              @mouseenter="frmid = 3"
              :class="{ active: frmid == 3 }"
              class="card_item"
            >
              <div class="card">
                <div class="titles">
                  <h3
                    class="wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.7s"
                  >
                    FRM考试资料
                  </h3>
                  <p
                    class="wow animate__animated animate__bounceInUp"
                    data-wow-delay="0.8s"
                  >
                    资料在手 考试无忧
                  </p>
                </div>
                <div class="card_content first_content">
                  <ul class="first_list">
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="0.9s"
                    >
                      <img src="@/assets/images/frm_img/zkz.png" alt="" />
                      <p>aims</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="1s"
                    >
                      <img src="@/assets/images/frm_img/cjcx.png" alt="" />
                      <p>study guide</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="1.1s"
                    >
                      <img src="@/assets/images/frm_img/kssj.png" alt="" />
                      <p>notes</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="1.2s"
                    >
                      <img src="@/assets/images/frm_img/ksdd.png" alt="" />
                      <p>hand book</p>
                    </li>
                    <li
                      class="wow animate__animated animate__bounceInUp"
                      data-wow-delay="1.3s"
                    >
                      <img src="@/assets/images/frm_img/kslc.png" alt="" />
                      <p>practice exam</p>
                    </li>
                  </ul>
                </div>
                <div class="card_content second_content">
                  <div class="center">
                    <div class="item">
                      <div class="title">
                        <img src="@/assets/images/frm_img/zkz.png" alt="" />
                        <p>aims</p>
                      </div>
                      <p class="text">GARP协会考纲</p>
                      <a
                        href="https://www.rongyuejiaoyu.com/combo/order/book/cid/2"
                        target="_blank"
                        >了解详情</a
                      >
                    </div>
                    <div class="item">
                      <div class="title">
                        <img src="@/assets/images/frm_img/cjcx.png" alt="" />
                        <p>study guide</p>
                      </div>
                      <p class="text">GARP协会原版书</p>
                      <a
                        href="https://www.rongyuejiaoyu.com/combo/order/book/cid/2"
                        target="_blank"
                        >了解详情</a
                      >
                    </div>
                  </div>
                  <div class="btm">
                    <a
                      href="https://www.rongyuejiaoyu.com/combo/order/book/cid/2"
                      class="item"
                      target="_blank"
                    >
                      <h5>notes</h5>
                      <p>易学、易用、易记、易懂</p>
                    </a>
                    <a
                      href="https://www.rongyuejiaoyu.com/combo/order/combo"
                      class="item"
                      target="_blank"
                    >
                      <h5>hand book</h5>
                      <p>精讲课程后进行相应的课后练习</p>
                    </a>
                    <a
                      href="http://www.rongyuejiaoyu.com/index/user/new_page"
                      class="item"
                      target="_blank"
                    >
                      <h5>practice exam</h5>
                      <p>GARP协会模拟题</p>
                    </a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 底部 -->
      <div class="get_free">
        <div class="heart_w">
          <div class="tit_box">
            <h1
              class="wow animate__animated animate__fadeInRight"
              data-wow-delay="0s"
            >
              想要快速立足于金融行业之巅
            </h1>
            <p
              class="line wow animate__animated animate__fadeInRight"
              data-wow-delay="0.3s"
            >
              <span></span>
              <span></span>
              <span></span>
            </p>
            <p
              class="text wow animate__animated animate__fadeInRight"
              data-wow-delay="0.2s"
            >
              融跃免费获取VIP教程 分分钟都是干货，等你来拿！
            </p>
          </div>
          <div class="main_box">
            <div class="ipts">
              <div
                class="name common wow animate__animated animate__fadeInRight"
                data-wow-delay="0.2s"
              >
                <img src="@/assets/images/frm_img/user.png" alt="" />
                <div class="iptbox">
                  <input
                    v-model="last_name"
                    type="text"
                    placeholder="姓名/name"
                  />
                </div>
              </div>
              <div
                class="email common wow animate__animated animate__fadeInRight"
                data-wow-delay="0.4s"
              >
                <img src="@/assets/images/frm_img/email.png" alt="" />
                <div class="iptbox">
                  <input
                    v-model="last_email"
                    type="text"
                    placeholder="请输入邮箱"
                  />
                </div>
              </div>
              <div
                class="phone common wow animate__animated animate__fadeInRight"
                data-wow-delay="0.3s"
              >
                <img src="@/assets/images/frm_img/phone.png" alt="" />
                <div class="iptbox">
                  <input
                    v-model="last_phone"
                    type="text"
                    placeholder="请输入电话"
                  />
                  <button @click="getcode_ss">{{ timeText3 }}</button>
                </div>
              </div>
              <div
                class="code common wow animate__animated animate__fadeInRight"
                data-wow-delay="0.4s"
              >
                <img src="@/assets/images/frm_img/code.png" alt="" />
                <div class="iptbox">
                  <input
                    v-model="last_code"
                    type="text"
                    placeholder="请输入短信验证码"
                  />
                </div>
              </div>
            </div>
            <button
              @click="getfree"
              class="subget wow animate__animated animate__fadeInRight"
              data-wow-delay="0.5s"
            >
              提交领取
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FRMage',
  data() {
    return {
      imageData: [
        {
          title: '123123img',
          imgUrl: require('@/assets/images/CMAenter.jpg')
        },
        {
          title: '123123img',
          imgUrl:
            'https://img.rongyuejiaoyu.com/uploads/20230419/849a76e4b4fe90a3d496b564bee06bbb.jpg'
        },
        {
          title: '123image',
          imgUrl: require('@/assets/images/CPA.jpg')
        },
        {
          title: '123image',
          imgUrl: require('@/assets/images/cfaSwipet.jpg')
        }
      ],
      video_url:
        'https://video.rycfa.com/sv/2372325e-17554049aea/2372325e-17554049aea.mp4',
      suggest_courses: [
        {
          image:
            'https://img.rongyuejiaoyu.com/uploads/20201230/01772d3f06e4f4303609dc09d04de329.png'
        },
        {
          image:
            'https://img.rongyuejiaoyu.com/uploads/20201230/01772d3f06e4f4303609dc09d04de329.png'
        },
        {
          image:
            'https://img.rongyuejiaoyu.com/uploads/20201230/01772d3f06e4f4303609dc09d04de329.png'
        },
        {
          image:
            'https://img.rongyuejiaoyu.com/uploads/20201230/01772d3f06e4f4303609dc09d04de329.png'
        },
        {
          image:
            'https://img.rongyuejiaoyu.com/uploads/20201230/01772d3f06e4f4303609dc09d04de329.png'
        },
        {
          image:
            'https://img.rongyuejiaoyu.com/uploads/20201230/01772d3f06e4f4303609dc09d04de329.png'
        }
      ],
      // 资料领取
      datumForm: {
        name: '',
        phone: '',
        code: ''
      },
      timeText: '获取验证码',
      your_name: '',
      your_phone: '',
      your_email: '',
      frmid: 0,
      timeText3: '获取验证码',
      last_name: '',
      last_phone: '',
      last_code: '',
      last_email: '',
      out_val: false
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      new this.$wow.WOW().init()
    })
    this.init_t()
    this.initSwiper1()
    this.initSwiper3()
    this.swiper4()
    this.swiper5()

    $('.tips .item').mouseover(function () {
      $(this).find('.out').show()
      $(this).find('.out').addClass('animate__fadeInUp')
    })

    $('.tips .item').mouseleave(function () {
      $(this).find('.out').fadeOut(300)
      $(this).find('.out').removeClass('animate__fadeInUp')
    })
  },
  methods: {
    getfree() {},
    getcode_ss() {},
    getcode() {},
    getData() {},
    getdata_t() {},
    changgecideo() {},
    init_t() {
      const mySwiper_t = new this.$swiper('.carousel .swiper-container', {
        direction: 'horizontal', // 水平切换选项
        loop: true, // 循环模式选项
        autoplay: true, //自动切换
        effect: 'slide', // 切换效果
        pagination: {
          el: '.carousel .swiper-pagination',
          clickable: true
        }
      })
    },
    initSwiper1() {
      let swiper2 = new this.$swiper('.intd .swiper-container', {
        slidesPerView: 3,
        navigation: {
          nextEl: '.intd .swiper-button-next',
          prevEl: '.intd .swiper-button-prev'
        },
        observer: true,
        observeParents: true
      })
    },
    initSwiper3() {
      let swiper3 = new this.$swiper('.live_box .swiper-container', {
        slidesPerView: 4,
        navigation: {
          nextEl: '.live_box .swiper-button-next',
          prevEl: '.live_box .swiper-button-prev'
        },
        observer: true,
        observeParents: true
      })
    },
    swiper4() {
      new this.$swiper('.lecturer .swiper-container', {
        slidesPerView: 4,
        pagination: {
          el: '.lecturer .swiper-pagination',
          clickable: true
        },
        loop: true,
        observer: true,
        observeParents: true
      })
    },
    swiper5() {
      new this.$swiper('.test_date .swiper-container', {
        slidesPerView: 6,
        navigation: {
          nextEl: '.test_date .swiper-button-next',
          prevEl: '.test_date .swiper-button-prev'
        },
        observer: true,
        observeParents: true
      })
    }
  }
}
</script>

<style lang="scss">
body,
html,
#app {
  background-color: #fff;
}
</style>
<style scoped lang="scss">
@import '@/assets/styles/frmPage.scss';
</style>
